<template>
	<view class="edit-info">
		<base-common></base-common>
		<div class="content-view">
			<button class="avatar-warp" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<div v-if="!userImage" class="default">
					<image src="@/static/upload-avatar.png" />
					<text>设置头像</text>
				</div>
				<image v-else class="real-avatar" :src="userImage" />
				<div v-if="showRotate" class="load-icon"><uni-icons type="loop" color="#cccccc" size="25"></uni-icons></div>
			</button>
			<div class="input-warp">
				<input type="nickname" v-model="nickName" class="uni-input" focus placeholder="使用微信昵称或输入昵称" @input="checkTextLength" />
				<div class="btn" @click="saveUserInfo(true)">保存</div>
			</div>
		</div>
	</view>
</template>

<script>
import { apiSaveUserInfo, apiGetUserInfo } from '@/api/user/user.js';
export default {
	data() {
		return {
			userInfo: {},
			showRotate: false,
			nickName: '',
			userImage: ''
		};
	},
	onShow() {
		this.token = uni.getStorageSync('Access-Token');
		this.getUserInfo();
	},
	methods: {
		// 校验输入内容，限制中文16字符，英文32字符
		checkTextLength(e) {
			let text = e.detail.value;
			let charLength = 0;
			const maxLength = 32;
			for (let i = 0; i < text.length; i++) {
				const charCode = text.charCodeAt(i);
				if (charCode > 255) {
					charLength += 2; // 中文两个字符
				} else {
					charLength += 1; // 英文一个字符
				}
				if (charLength > maxLength) {
					text = text.substr(0, i);
					this.$nextTick(() => {
						this.nickName = text;
					});
				}
			}
		},
		getUserInfo() {
			this.$tip.loading();
			apiGetUserInfo().then((res) => {
				if (res.code === 200) {
					this.$tip.loaded();
					this.userInfo = res.data;
					const { avatar, nickName } = this.userInfo;
					this.userImage = avatar || '';
					this.nickName = nickName || '';
				}
			});
		},
		onChooseAvatar(e) {
			const { avatarUrl } = e.detail;
			// this.userImage = avatarUrl;
			let Authorization = uni.getStorageSync('Access-Token');
			let url = '';
			if (process.env.NODE_ENV == 'development') {
				url = 'https://bjielts-t.test.xdf.cn/test-api/user/save/avatar';
			} else {
				url = 'https://bjielts.xdf.cn/prod-api/user/save/avatar';
			}
			const _this = this;
			this.$tip.loading('上传中');
			this.showRotate = true;
			wx.uploadFile({
				url: url,
				filePath: avatarUrl,
				header: {
					u2at: Authorization
				},
				name: 'file',
				formData: {
					user: 'test'
				},
				complete(res) {
					console.log(res, '上传完成---------------');
					_this.$tip.loaded();
					_this.showRotate = false;
					const data = JSON.parse(res.data);
					if (data.code == 200) {
						_this.userImage = ''
						_this.$nextTick(() => {
							_this.userImage = data.data;
							console.log('图片上传成功，调用保存接口', data.data)
							_this.saveUserInfo(false);
						})
					}else {
						_this.$tip.toast(data.msg)
					}
				}
			});
		},

		// isback 保存之后退回上一页
		saveUserInfo(isBack = false) {
			console.log('保存接口调用了', this.userImage)
			apiSaveUserInfo({
				openId: this.userInfo.openId,
				unionId: this.userInfo.unionId,
				avatar: this.userImage,
				nickName: this.nickName
			}).then((res) => {
				if(res.code == 200){
					if (isBack) {
						this.$tip.success('保存成功');
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					}
				}else {
					this.$tip.toast(res.msg)
				}
			}).catch(err => {
				this.$tip.toast(err.msg)
			})
		}
	}
};
</script>

<style lang="scss" scoped>
@function torem($rpx) {
	//$rpx为需要转换的字号
	@return #{$rpx * 100 / 750 / 4}rem;
}
.edit-info {
	background-color: #f3f5f8;
	height: 100%;
	min-height: 100vh;
}
.content-view {
	padding-top: torem(99);
	box-sizing: border-box;
	.avatar-warp {
		width: torem(170) !important;
		height: torem(170) !important;
		border: none;
		padding: 0;
		position: relative;
		border-color: rgba(0, 0, 0, 0);
		background-color: #fff;
		border-radius: 50%;
		margin: 0 auto torem(78);
		-webkit-appearance: none;
		background-clip: padding-box;

		.default {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: torem(24);
			font-weight: 400;
			background-color: rgba(0, 0, 0, 0.25);
			line-height: torem(24);
			width: torem(150);
			height: torem(150);
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			image {
				width: torem(50);
				height: torem(40);
				margin-bottom: torem(16);
			}
		}
		.real-avatar {
			border-radius: 50%;
			// width: torem(155);
			// height: torem(155);
			width: torem(150);
			height: torem(150);
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			-webkit-appearance: none;
			background-clip: padding-box;
		}
		.load-icon {
			position: absolute;
			left: 0;
			top: 0;
			background-color: rgba(255, 255, 255, 0.3);
			width: 100%;
			height: 100%;
			z-index: inherit;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			animation: rotate 2s linear infinite;
		}
		@keyframes rotate {
			0% {
				transform: rotate(0deg);
			}
			100% {
				transform: rotate(360deg);
			}
		}
	}
	.avatar-warp::after {
		content: none;
		border: none;
	}
	.input-warp {
		padding: 0 torem(30);
		width: calc(100% - 60rpx);
		.btn {
			height: torem(82);
			line-height: torem(82);
			text-align: center;
			border-radius: torem(41);
			width: 100%;
			color: #fff;
			background-color: #fd453d;
			font-size: torem(28);
			margin-top: torem(60);
		}
		.uni-input {
			// width:torem(325);
			height: torem(50);
			border-radius: torem(10);
		}
	}
}
.wchat-name {
	width: 100%;
	// height: torem(110);
	padding: torem(11) torem(26);
	background-color: #ececec;
	box-sizing: border-box;
	.content {
		width: 100%;
		height: torem(88);
		background-color: #fff;
		color: #999999;
		font-size: torem(24);
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: torem(10);
		.w-name {
			color: #333;
			margin-top: torem(11);
		}
	}
}
</style>
